<!DOCTYPE html>
<html>
<head>
<title>Coaxial Transmission Line</title>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const cx = 180;
    const cy = 150;
    const rOuterY = 100;
    const rOuterX = 50;
    const rInnerY = 50;
    const rInnerX = 25;
    const len = 310;
    const lenSolid = 200;
    const mainLineWidth = 2.5;
    const dimLineWidth = 1.5;

    // --- 1. Draw the gray filled region ---
    ctx.fillStyle = 'rgb(211, 211, 211)'; // lightgray

    // Draw the full outer shape
    ctx.beginPath();
    // Right half of the ellipse
    ctx.ellipse(cx, cy, rOuterX, rOuterY, 0, -Math.PI / 2, Math.PI / 2);
    // Rectangle part
    ctx.lineTo(cx + len, cy + rOuterY);
    ctx.lineTo(cx + len, cy - rOuterY);
    ctx.closePath();
    ctx.fill();

    // Use composite operation to "punch a hole" for the inner part
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'black'; // The color doesn't matter here
    ctx.beginPath();
    // Right half of the inner ellipse
    ctx.ellipse(cx, cy, rInnerX, rInnerY, 0, -Math.PI / 2, Math.PI / 2);
    // Inner rectangle part to be removed
    ctx.lineTo(cx + len, cy + rInnerY);
    ctx.lineTo(cx + len, cy - rInnerY);
    ctx.closePath();
    ctx.fill();

    // Reset composite operation to default
    ctx.globalCompositeOperation = 'source-over';

    // --- 2. Draw the black outlines ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = mainLineWidth;

    // Outer ellipse
    ctx.beginPath();
    ctx.ellipse(cx, cy, rOuterX, rOuterY, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // Inner ellipse
    ctx.beginPath();
    ctx.ellipse(cx, cy, rInnerX, rInnerY, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // Solid lines of the cylinder
    ctx.setLineDash([]);
    ctx.beginPath();
    ctx.moveTo(cx, cy - rOuterY);
    ctx.lineTo(cx + lenSolid, cy - rOuterY);
    ctx.moveTo(cx, cy + rOuterY);
    ctx.lineTo(cx + lenSolid, cy + rOuterY);
    ctx.moveTo(cx, cy - rInnerY);
    ctx.lineTo(cx + lenSolid, cy - rInnerY);
    ctx.moveTo(cx, cy + rInnerY);
    ctx.lineTo(cx + lenSolid, cy + rInnerY);
    ctx.stroke();

    // Dashed lines of the cylinder
    ctx.setLineDash([6, 6]);
    ctx.beginPath();
    ctx.moveTo(cx + lenSolid, cy - rOuterY);
    ctx.lineTo(cx + len, cy - rOuterY);
    ctx.moveTo(cx + lenSolid, cy + rOuterY);
    ctx.lineTo(cx + len, cy + rOuterY);
    ctx.moveTo(cx + lenSolid, cy - rInnerY);
    ctx.lineTo(cx + len, cy - rInnerY);
    ctx.moveTo(cx + lenSolid, cy + rInnerY);
    ctx.lineTo(cx + len, cy + rInnerY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset line dash

    // --- 3. Draw dimension lines and labels ---
    ctx.lineWidth = dimLineWidth;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    const dim_b_x = 70;
    const dim_a_x = 110;
    
    // Helper function to draw an upward-pointing arrowhead
    function drawUpArrow(x, y) {
        const h = 8; // height of arrowhead
        const w = 5; // half-width of arrowhead
        ctx.beginPath();
        ctx.moveTo(x - w, y + h);
        ctx.lineTo(x, y);
        ctx.lineTo(x + w, y + h);
        ctx.stroke();
    }

    // Dimension 'b'
    ctx.beginPath();
    ctx.moveTo(dim_b_x, cy);
    ctx.lineTo(dim_b_x, cy - rOuterY);
    ctx.stroke();
    drawUpArrow(dim_b_x, cy - rOuterY);

    // Dimension 'a'
    ctx.beginPath();
    ctx.moveTo(dim_a_x, cy);
    ctx.lineTo(dim_a_x, cy - rInnerY);
    ctx.stroke();
    drawUpArrow(dim_a_x, cy - rInnerY);

    // Horizontal line from dimension lines to center axis
    ctx.beginPath();
    ctx.moveTo(dim_b_x, cy);
    ctx.lineTo(cx, cy);
    ctx.stroke();

    // Dashed helper lines
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(cx, cy - rOuterY);
    ctx.lineTo(dim_b_x, cy - rOuterY);
    ctx.moveTo(cx, cy - rInnerY);
    ctx.lineTo(dim_a_x, cy - rInnerY);
    ctx.stroke();
    ctx.setLineDash([]);

    // Labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.font = 'italic 26px Times New Roman';
    ctx.fillText('b', dim_b_x - 20, cy - rOuterY / 2);

    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('a', dim_a_x - 18, cy - rInnerY / 2);

</script>
</body>
</html>